<style scoped>

</style>
<template>
    <div id='myApp'>
        <Row style="margin-bottom: 10px;border-bottom: 1px solid #eeeeee;">
            <Col span="6" style="border-bottom:2px solid #2d8cf0 ;padding: 0 0 8px 18px;">
            <span style="color: #2d8cf0;">
                <Icon type="md-add-circle" />&nbsp;&nbsp;
                <span style="color: black;">日志审计&nbsp;&nbsp;>&nbsp;&nbsp;</span>
                操作日志
            </span>
            </Col>
        </Row>
        <Row style="margin-bottom: 20px;">
            <Col span="7">
            开始日期：
            <DatePicker format="yyyyMMdd" @on-change="startTime" type="date" placeholder="开始日期"
                    style="width: 70%;">
                </DatePicker>
            </Col>
            <Col span="7">
            结束日期：
            <DatePicker format="yyyyMMdd" @on-change="endTime" type="date" placeholder="结束日期"
                    style="width: 70%;">
                </DatePicker>
            </Col>
            <Col span="7">
            事件类型：
            <Select v-model="condition.event" style="width:70%">
                <Option v-for="item in eventList" :value="item.value" :key="item.value">{{item.label}}</Option>
            </Select>
            </Col>
            <Col span="2">
            &nbsp;&nbsp;
            <Button type="primary" @click="handleSearch">
                <Icon type="ios-search" /></Button>
            </Col>
        </Row>
        <Table :columns="httpColumns" :data="httpData"></Table>
        <div style="float: right; margin-top: 15px">
            <Page 
            :total="dataCount" 
            :page-size="pageSize" 
            show-total 
            class="paging" 
            @on-change="changepage" 
            @on-page-size-change="pages" 
            show-elevator 
            show-sizer 
            show-total></Page>
        </div>
    </div>
    </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
import zmitiUtil from '../../lib/util'

    export default {
        computed: mapState({
            Authorization: state => state.Authorization
        }),

        data() {
            return {
                
                dataCount: 0,
                pageSize: 10,
                ajaxHttpData: [],
                xia: 0,
                httpColumns: [
                    {
                        title: '事件类型',
                        width:120,
                        key: 'event',
                        align: 'left'
                    },
                    {
                        title: '事件详情',
                        key: 'detail',
                        align: 'left',
                    },
                    {
                        title: '访问IP',
                        key: 'ip',
                        align: 'center',
                        width:120,
                    },
                    {
                        title: '操作员',
                        width:120,
                        key: 'user',
                        align: 'center'
                    },
                    {
                        title: '日期',
                        key: 'date',
                        align: 'center',
                        width:180
                    }
                ],
                httpData: [],
                condition:{
                    event:'',
                    startDate:'',
                    endDate:'',
                    pageNO:1,
                    pageSize:10
                },
                eventList:[{
                    label:'创建数据源',
                    value:'创建数据源'
                },{
                    label:'修改数据源',
                    value:'修改数据源'
                },{
                    label:'启用_停用数据源',
                    value:'启用_停用数据源'
                },{
                    label:'删除数据源',
                    value:'删除数据源'
                },{
                    label:'保存SQL任务',
                    value:'保存SQL任务'
                },{
                    label:'执行SQL查询',
                    value:'执行SQL查询'
                },{
                    label:'创建API',
                    value:'创建API'
                },{
                    label:'启用_停用API',
                    value:'启用_停用API'
                },{
                    label:'修改API',
                    value:'修改API'
                },{
                    label:'删除API',
                    value:'删除API'
                },{
                    label:'测试API',
                    value:'测试API'
                },{
                    label:'创建APIKey',
                    value:'创建APIKey'
                },{
                    label:'启用_停用APIKey',
                    value:'启用_停用APIKey'
                },{
                    label:'删除APIKey',
                    value:'删除APIKey'
                },{
                    label:'创建用户',
                    value:'创建用户'
                },{
                    label:'删除用户',
                    value:'删除用户'
                },{
                    label:'用户登录',
                    value:'用户登录'
                },{
                    label:'用户退出',
                    value:'用户退出'
                },{
                    label:'修改用户信息',
                    value:'修改用户信息'
                },{
                    label:'系统设置',
                    value:'系统设置'
                }]


            }
        },
        mounted() {
            this.getDataList();
        },
        methods: {
            save() {
                this.$Message.success('保存成功！');
                location.reload()
            },
            reset() {
                this.$Message.info('Clicked cancel');
            },
            pages(num) { //修改每页显示条数时调用
                this.pageSize = num;
                this.changepage(1);
            },
            getDataList(){//列出所有的
                var _this = this;                
                var path='log/oplog/list';
                var postData = _this.condition;
                zmitiUtil.Ajax(path,postData).then(res => {
                    var data = JSON.parse(res.data); 
                    console.log(data,'data')                   
                    if(data.total>0){
                        _this.httpData = data.results;
                        _this.dataCount=data.total
                    }else{
                        _this.httpData=[];
                        _this.dataCount=0;
                    }
                    
                }).catch((error) => {
                    console.log(error,'error');
                });
            },
            // 获取翻页列表
            changepage(index) {
                var _this = this;
                //index当前页码
                console.log('index = ' + index)
                _this.condition.pageNO=index;
                _this.getDataList();           
            },
            startTime(val,datetype){//开始日期
                console.log(val,'选择的开始日期',datetype);
                this.condition.startDate=val;
            },
            endTime(val,datetype){//结束日期
                console.log(val,'选择的结束日期',datetype);
                this.condition.endDate=val;
            },
            handleSearch(){
                var _this = this;
                _this.condition.pageNO=1;
                _this.getDataList();
            },
            pages(num) { //修改每页显示条数时调用
                this.condition.pageSize = num;
                this.condition.pageNO=1;
                setTimeout(()=>{
                    this.getDataList();
                },300)                
            },
            

        },
        created() {
            // this.handleListApproveHttp();
        }
    }
</script>